<script setup lang="ts">
import { ref, onMounted, watch } from "vue";

// props
const props = defineProps(["theme"])

// parse url params
const urlParams = new URLSearchParams(window.location.search);
const params = {
    name: urlParams.get("name") || "",
    path: urlParams.get("path") || "",
    theme: urlParams.get("theme") || "light",
}

const loading = ref(0)
const view = ref()
onMounted(() => {
    view.value.addEventListener('dom-ready', () => {
        if (loading.value === 0) {
            loading.value = 1
        }
        view.value.openDevTools()
        setValue()
    })
    view.value.addEventListener('did-fail-load', () => {
        loading.value = 2
    });
    view.value.addEventListener('message', (e: any) => {
        console.log(e, 2)
    });
    view.value.addEventListener('ipc-message', (e: any) => {
        setValue()
    })
})
window.addEventListener('message', (e: any) => {
    console.log(e, 1)
});

watch(() => props.theme, (val: string) => {
    console.log(val)
})
const setValue = () => {
    view.value.send("core", new Date().getTime().toString())
}

</script>
<template>
    <div class="w-full h-full flex flex-col">
        <div class="flex items-center gap-2 p-2">
            <a-button @click="setValue()">{{ $t("setting.theme") }}</a-button>
        </div>
        <!-- <webview ref="view" :src="`file:///${params.path}/dist/index.html`"
            :preload="`file:///${params.path}/preload.js`" nodeintegration class="w-full flex-1 h-0"></webview> -->
        <webview ref="view" :src="`http://localhost:5174/`" :preload="`file:///${params.path}/preload.js`"
           class="w-full flex-1 h-0"></webview>
    </div>
</template>
<style scoped></style>